<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="meizu-css/reset.css" />
    <link rel="stylesheet" href="meizu-css/base.css" />
    <link rel="stylesheet" href="meizu-css/header-nav.css" />
    <link rel="stylesheet" href="meizu-css/header-shopping-nav.css" />
    <link rel="stylesheet" href="meizu-css/main-banner.css" />
    <link rel="stylesheet" href="meizu-css/main-ads.css" />
    <link rel="stylesheet" href="meizu-css/main-introduce.css" />
    <link rel="stylesheet" href="meizu-css/footer-service.css" />
    <link rel="stylesheet" href="meizu-css/footer-copyright.css" />
    <title>魅族</title>
  </head>
  <body>
    <!-- 页面头部区域开始 -->
    <header>
      <!-- 页面顶部导航栏区域开始 -->
      <div class="header-nav">
        <div class="nav inner-c">
          <!-- 导航栏左边开始 -->
          <ul class="nav-left">
            <li class="item"><a href="javascript:;">魅族官网</a></li>
            <li class="item"><a href="javascript:;">魅族商城</a></li>
            <li class="item"><a href="javascript:;">Flyme</a></li>
            <li class="item"><a href="javascript:;">专卖店</a></li>
            <li class="item"><a href="javascript:;">服务</a></li>
            <li class="item"><a href="javascript:;">社区</a></li>
          </ul>
          <!-- 导航栏左边结束 -->
          <!-- 导航栏右边开始 -->
          <ul class="nav-right">
            <li class="item">
              <a href="javascript:;">我的收藏<i>new</i></a>
            </li>
            <li class="item"><a href="javascript:;">我的订单</a></li>
            <li class="item"><a href="javascript:;">登录</a></li>
            <li class="item"><a href="javascript:;">注册</a></li>
          </ul>
          <!-- 导航栏右边结束 -->
        </div>
      </div>
      <!-- 页面顶部导航栏区域结束 -->
      <!-- 页面商品导航栏开始 -->
      <div class="header-shopping inner-c">
        <h1 class="logo"><a href="javascript:;">魅族 | 魅族手机 | Meizu </a></h1>
        <ul class="shopping-nav">
          <li class="shopping"><a href="javascript:;">PRO手机</a></li>
          <li class="shopping"><a href="javascript:;">魅蓝手机</a></li>
          <li class="shopping"><a href="javascript:;"> MX手机</a></li>
          <li class="shopping"><a href="javascript:;">精选配件</a></li>
          <li class="shopping"><a href="javascript:;">智能硬件</a></li>
        </ul>
      </div>
      <!-- 页面商品导航栏结束 -->
    </header>
    <!-- 页面头部区域结束 -->
    <!-- 页面主题内容区域开始 -->
    <main>
      <!-- 页面商品banner区域开始 -->
      <div class="banner">
        <div class="menu">
          <p>全部商品分类</p>
          <p>手机</p>
          <p>智能硬件</p>
          <p>耳机 / 音箱</p>
          <p>路由器 / 移动电源</p>
          <p>保护套 / 后盖 / 贴膜</p>
          <p>数据线 / 电源适配器</p>
          <p>周边配件</p>
        </div>
        <span class="left-arrow">&lsaquo;</span>
        <span class="right-arrow">&rsaquo;</span>
        <img src="./meizu-images/banner.jpg" />
        <img src="./meizu-images/banner.jpg" />
        <img src="./meizu-images/banner.jpg" />
        <ol class="dot">
          <li class="current"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
      <!-- 页面商品banner区域结束 -->
      <!-- 页面商品小广告区域开始 -->
      <div class="adv inner-c">
        <div class="adv-item service">
          <div class="service-type">
            <img src="./meizu-images/1450855246-61162.png" />
            <h2>M码通道</h2>
          </div>
          <div class="service-type">
            <img src="./meizu-images/1450855279-64872.png" />
            <h2>以旧换新</h2>
          </div>
          <div class="service-type">
            <img src="./meizu-images/1450855198-58056.png" />
            <h2>魅族意外保</h2>
          </div>
          <div class="service-type">
            <img src="./meizu-images/1451960447-93534.png" />
            <h2>回购单查询</h2>
          </div>
        </div>
        <div class="adv-item date">
          <img class="item-img" src="./meizu-images/1469442560-64371.jpg" />
        </div>
        <div class="adv-item phone">
          <img class="item-img" src="./meizu-images/Cix_s1fuEgmAc5NwAABEl576SHY123.jpg" />
        </div>
        <div class="adv-item power">
          <img class="item-img" src="./meizu-images/CnQOjVfhDa2AKtdyAAAtKjihE5E114.jpg" />
        </div>
        <div class="adv-item other">
          <img class="item-img" src="./meizu-images/Cix_s1f66-eAGausAABXAszHWuE990.png" />
        </div>
      </div>
      <!-- 页面商品小广告区域结束 -->
      <!-- 页面商品介绍区域开始 -->
      <div class="introduce">
        <dl class="content inner-c">
          <dt>
            <h2 class="title">手机</h2>
            <span class="more">更多</span>
          </dt>
          <dd class="content-item">
            <div class="hot">热卖</div>
            <img src="./meizu-images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" />
            <h2 class="shop-name">魅蓝note3</h2>
            <p class="sale">11日-12日 限量开售</p>
            <p class="price">￥ 799</p>
          </dd>
          <dd class="content-item">
            <img src="./meizu-images/CnQOjVf8Qm2AGJwmAAf5c4NUNpI085_180x180.png" />
            <h2 class="shop-name">魅蓝3</h2>
            <p class="sale">11日-12日 公开版限量开售</p>
            <p class="price">￥ 599</p>
          </dd>
          <dd class="content-item">
            <div class="hot">热卖</div>
            <img src="./meizu-images/Cix_s1f6EZaAMxvjAA2l_exLROk326_180x180.png" />
            <h2 class="shop-name">魅蓝3s</h2>
            <p class="sale">11日-12日 限量开售</p>
            <p class="price">￥ 699</p>
          </dd>
          <dd class="content-item">
            <div class="hot specail">特惠</div>
            <img src="./meizu-images/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png" />
            <h2 class="shop-name">魅蓝 metal</h2>
            <p class="sale">领券立减100元</p>
            <p class="price">￥ 999</p>
          </dd>
          <dd class="content-item">
            <div class="hot">热卖</div>
            <img src="./meizu-images/CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png" />
            <h2 class="shop-name">魅蓝 E</h2>
            <p class="sale">全网通 多彩金属机身</p>
            <p class="price">￥ 1299</p>
          </dd>
        </dl>
      </div>
      <!-- 页面商品介绍区域结束 -->
    </main>
    <!-- 页面主题内容区域结束 -->
    <!-- 页面页脚区域开始 -->
    <footer>
      <!-- 页面页脚其他服务导航区域开始 -->
      <div class="other-service inner-c">
        <dl class="content">
          <dt class="title">帮助说明</dt>
          <dd class="link"><a href="javascript:;">支付方式</a></dd>
          <dd class="link"><a href="javascript:;">配送说明</a></dd>
          <dd class="link"><a href="javascript:;">售后服务</a></dd>
          <dd class="link"><a href="javascript:;">付款帮助</a></dd>
        </dl>
        <dl class="content">
          <dt class="title">Flyme</dt>
          <dd class="link"><a href="javascript:;">开放平台</a></dd>
          <dd class="link"><a href="javascript:;">固件下载</a></dd>
          <dd class="link"><a href="javascript:;">软件商店</a></dd>
          <dd class="link"><a href="javascript:;">查找手机</a></dd>
        </dl>
        <dl class="content">
          <dt class="title">关于我们</dt>
          <dd class="link"><a href="javascript:;">关于魅族</a></dd>
          <dd class="link"><a href="javascript:;">加入我们</a></dd>
          <dd class="link"><a href="javascript:;">联系我们</a></dd>
          <dd class="link"><a href="javascript:;">法律声明</a></dd>
        </dl>
        <dl class="content">
          <dt class="title">关注我们</dt>
          <dd class="link"><a href="javascript:;">新浪微博</a></dd>
          <dd class="link"><a href="javascript:;">腾讯微博</a></dd>
          <dd class="link"><a href="javascript:;">QQ空间</a></dd>
          <dd class="link"><a href="javascript:;">官方微信</a></dd>
        </dl>
        <div class="content custom-service">
          <p class="title">24小时全国服务热线</p>
          <p class="hotline">400-788-3333</p>
          <p class="online-service"><span>24小时在线客服</span></p>
        </div>
      </div>
      <!-- 页面页脚其他服务导航区域结束 -->
      <!-- 页面页脚版权信息区域开始 -->
      <p class="copyright inner-c">
        <span>&copy;2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
        <span>备案号：粤ICP备13003602号-2 </span>
        <span>经营许可证编号：粤B2-20130198</span>
        <span>营业执照</span>
        <span class="icon">
          <i></i>
          <i></i>
          <i></i>
        </span>
      </p>
      <!-- 页面页脚版权信息区域结束 -->
      <!-- 回到顶部开始 -->
      <div class="back-top"></div>
      <!-- 回到顶部结束 -->
    </footer>
    <!-- 页面页脚区域结束 -->
  </body>
</html>
